import { Component, Input, OnInit } from '@angular/core';
import { ApesModalRef } from '@shared/apes/modal';
import { deepClone } from '../../utils/utils';

@Component({
  selector: 'assembly-drawing-dialog',
  template: `
    <p *ngIf="modelData.parts.length> 1">
      <apes-select style="width: 200px;" apesPlaceHolder="请选择标准配件名称" [(ngModel)]="partsSelect"
                   (ngModelChange)="partsChange($event)">
        <apes-option *ngFor="let data of modelData.parts" [apesLabel]="data.PJMC" [apesValue]="data"></apes-option>
      </apes-select>
    </p>
    <p *ngIf="modelData.parts.length == 0">
      <apes-checkbox-wrapper style="width: 100%;" (apesOnChange)="orientationChange($event)">
        <div apes-row>
          <div apes-col apesSpan="12"><label apes-checkbox apesValue="前">前</label></div>
          <div apes-col apesSpan="12"><label apes-checkbox apesValue="后">后</label></div>
          <div apes-col apesSpan="12"><label apes-checkbox apesValue="左">左</label></div>
          <div apes-col apesSpan="12"><label apes-checkbox apesValue="右">右</label></div>
          <div apes-col apesSpan="12"><label apes-checkbox apesValue="上">上</label></div>
          <div apes-col apesSpan="12"><label apes-checkbox apesValue="下">下</label></div>
          <div apes-col apesSpan="12"><label apes-checkbox apesValue="内">内</label></div>
          <div apes-col apesSpan="12"><label apes-checkbox apesValue="外">外</label></div>
          <div apes-col apesSpan="12"><label apes-checkbox apesValue="中">中</label></div>
          <div apes-col apesSpan="12">
            <input apes-input style="width: 60%;" [placeholder]="'其他方位'" [(ngModel)]="inputValue" (keyup)="orientationChange($event)"/>
          </div>
        </div>
      </apes-checkbox-wrapper>
    </p>
  `,
  styles: [`
    .data-kanban-dialog-span {
      text-align: center;
    }
  `],
})
export class AssemblyDrawingDialogComponent implements OnInit {

  @Input() modelData: any = {};
  // @Input() parts: any;
  partsSelect: any;
  resData: any = {};
  private inputValue: any = '';

  constructor(
    private modal: ApesModalRef,
  ) {
  }

  ngOnInit() {
    this.resData = deepClone(this.modelData);
  }

  partsChange(part) {
    this.resData.parts = [];
    this.resData.parts.push(part);
  }

  orientationChange(res) {
    let position = '';
    if (res.length > 0) {
      res.forEach((t) => {
        position += t;
      });
    }
    if(this.inputValue != ''){
      position += this.inputValue;
    }
    this.resData['positionConfirma'] = '';
    this.resData['positionConfirma'] = position;
  }

  destroyModal(): void {
    this.modal.destroy(this.resData);
  }

}
